<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表页</title>
		<link rel="stylesheet" href="./Public/Home/css/list.css" />
		<link rel="stylesheet" href="./Public/Home/css/common.css" />
		<script type="text/javascript" src="./Public/Home/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="./Public/Home/js/land.js"></script>
		<script type="text/javascript">
			$(function(){
				$('.shou').click(function(){
					$('.CPU').hide();
					$(this).hide();
					$('.gengduo').show();
				})
				$('.gengduo').click(function(){
					$('.CPU').show();
					$('.shou').show();
					$(this).hide();
				})
			})
		</script>
	</head>
	<body>
		<!--登录-->
<div class="land">	
	<a href="javascript:;" id="landbottom1" class="landTop landTop1">登录</a>
	<a href="javascript:;" id="landbottom2" class="landTop">注册</a>
	<a href="javascript:;" class="x">×</a>
	<div class="landbottom landbottom1">
		<form action="http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=Login&a=login" method="post">
			<ul>
				<li>
					<span><img src="./Public/Home/images/username.jpg" alt="" /></span>
					<input type="text" name="username" id="" placeholder="请输入手机号" class="user"/>
				</li>
				<li>
					<span><img src="./Public/Home/images/password.jpg" alt="" /></span>
					<input type="password" name="password" id="" placeholder="请输入密码" class="user"/>
				</li>
				<li style="margin-top: 20px;">
					<input type="checkbox" name="" id="" checked="checked"/>
					<sp>自动登录</sp>
				</li>
				<li style="margin-top: 0;">
					<input type="submit" value="登录" class="button"/>
				</li>
			</ul>
		</form>
	</div>
	<div class="landbottom landbottom2">
		<form action="javascript:;" onsubmit="submits(this,'http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=Login&a=register')" method="post">
			<ul>
				<li>
					<sp>账号：</sp>
					<input type="text" name="username" id="" class="shuru" placeholder="请输入手机号"/>
					<span id="msg"></span>
				</li>
				<li>
					<sp>密码：</sp>
					<input type="password" name="password" id="password" class="shuru" placeholder="请输入密码"/>
				</li>
				<li>
					<sp>确认密码：</sp>
					<input type="password" name="confirmPassword" id="confirmPassword" class="shuru" placeholder="请再次输入密码"/>
					<span class="msg"></span>
				</li>
				<li>
					<sp>验证码：</sp>
					<input type="text" name="" id="code" class="shuru" style="width: 110px;"/>
					<img src="http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=Login&a=code" onclick="this.src = this.src + '&mt=' + Math.random()" alt=""/>
					<span class="code" style="margin-right: 200px;"></span>
				</li>
				<li>
					<input type="checkbox" name="" id="" checked="checked" style="margin-left: 120px;"/>
					<spa>同意联想的 <a href="" style="color: blue;">使用条款</a> 和 <a href="" style="color: blue;">隐私权政策</a></spa>
				</li>
				<li>
					<input type="submit" value="立即注册" class="button"/>
				</li>
			</ul>
		</form>
	</div>
</div>
<div class="zhezhao"></div>

<script type="text/javascript">
	function submits(obj,url){
		var preg = /(\+86)?1[2-9]\d{9}/;
		if(!obj['username'].value.match(preg)){
			alert('用户名不合法');
			return;
		}
		if(obj['confirmPassword'].value != obj['password'].value){
			alert('2次密码不一致');
			return;
		} 
		var data = $(obj).serialize();
		var username = obj['username'].value;
		var password = obj['password'].value;
		var confirmPassword = obj['confirmPassword'].value;
		var code = obj['code'].value;
		$.ajax({
			type:"post",
			url:url,
			data:{username:username,password:password,confirmPassword:confirmPassword,code:code},
			success:function(data){
				var data = $.parseJSON(data);
				if(data.error == 1){
					alert(data.msg);
				}else{
					obj['username'].value = '';
					obj['password'].value = '';
					obj['confirmPassword'].value = '';
					obj['code'].value = '';
					alert(data.msg);
					$('.land').hide();
					$('.zhezhao').hide();
				}
			}
		});
	}
	$(function(){
		$('input[name=username]').blur(function(){
			var preg = /(\+86)?1[2-9]\d{9}/;
			var pregs = $(this).val().match(preg);
			var username = this;
			var uname = $(this).val();
			$.ajax({
				type:"post",
				url:"http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=Login&a=username",
				data:{uname:uname,pregs:pregs},
				dataType:"json",
				success:function(data){
					if(data == 1){
						username.error = 1;
						$('#msg').html('<span style="color:red;">用户名已存在</span>');
					}else{
						username.error = 0;
						$('#msg').html('<span style="color:green;">可以注册</span>');
					}
					if(data == 2){
						username.error = 1;
						$('#msg').html('<span style="color:red;">请输入用户名</span>');
					}
					if(data == 3){
						username.error = 1;
						$('#msg').html('<span style="color:red;">用户名不合法</span>');
					}
				}
			})
		})
			
		$('input[name=confirmPassword]').blur(function(){
			var upassword = this;
			var password = $('#password').val();
			var confirmPassword = $('#confirmPassword').val();
			$.ajax({
				type:"post",
				url:"http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=Login&a=password",
				data:{password:password,confirmPassword:confirmPassword},
				dataType:"json",
				success:function(data){
					if(data == 1){
						confirmPassword.error = 1;
						$('.msg').html('<span style="color:red;">2次密码不一致</span>');
					}else{
						confirmPassword.error = 0;
						$('.msg').html('<span style="color:green;">可以注册</span>');
					}
					if(data == 2){
						confirmPassword.error = 1;
						$('.msg').html('<span style="color:red;">请输入密码</span>');
					}
				}
			})
		})
		
		$('#code').blur(function(){
			var codes = this;
			var code = $(this).val();
			$.ajax({
				type:"post",
				url:"http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=Login&a=codes",
				data:{code:code},
				dataType:"json",
				success:function(data){
					if(data == 1){
						codes.error = 1;
						$('.code').html('<span style="color:red;">请输入验证码</span>');
					}else{
						$('.code').html('<span style="color:green;">验证通过</span>');
					}
					if(data == 2){
						$('.code').html('<span style="color:red;">验证码错误</span>');
					}
				}
			})
		})
	})
</script>
		
<!--头部-->
<div class="top-box">
	<div class="top">
		<div class="top-left">
			<ul class="left-ul">
				<li><a href="" class="a">个人及家用</a></li>
				<li><a href="" class="a">个人及家用</a></li>
				<li><a href="" class="a">个人及家用</a></li>
				<li><a href="" class="a">个人及家用</a></li>
				<li><a href="" class="a">个人及家用</a></li>
				<li><a href="" class="c">个人及家用</a></li>
			</ul>
		</div>
		<div class="top-right">
			<ul class="right-ul">
				<li><a href="shopping.html">购物车</a></li>
								<li><a href="javascript:;" class="zhuc">注册</a> | </li>
				<li><a href="javascript:;" class="dengl">登录</a> | </li>
				
               			</ul>
		</div>
	</div>
</div>
<!--索引-->
<div class="logo">
	<div class="logo-left">
		<a href="http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=Index&a=index"><div></div></a>
	</div>
	<div class="logo-right">
		<div>
			<div class="indexed"></div>
			<input type="text" name="" id="" placeholder="请输入"/>
		</div>
	</div>
	<div class="value">
		<ul>
			<li><a href="">乐檬X3</a></li>
			<li><a href="">小新笔记本</a></li>
			<li><a href="">YOGA 4 Pro</a></li>
			<li><a href="">ThinkPad X1系列</a></li>
			<li><a href="">联想P1</a></li>
			<li><a href="">看家宝</a></li>
		</ul>
	</div>
</div>
<div class="cateT">
	<div class="cateLeft"></div>
	<div class="cateRight">
				<ul>
			<li><a href="http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=Index&a=index">首页</a></li>
						                
			<li><a href="http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=List&a=index&cid=1">Lenovo电脑</a></li>
			
               						                
			<li><a href="http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=List&a=index&cid=2">ThinkPad 电脑</a></li>
			
               						                
			<li><a href="http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=List&a=index&cid=3">苹果</a></li>
			
               						                
			<li><a href="http://127.0.0.1/Xu shixing/Mall/index.php?m=Home&c=List&a=index&cid=4">台式电脑</a></li>
			
               					</ul>
	</div>
</div>
<script type="text/javascript">
	$(function(){
		$('.username').click(function(){
			if($(this).attr('username') == 0){
				$('.outlogin-box').fadeIn();
				$(this).attr('username','1');
			}else{
				$('.outlogin-box').fadeOut();
				$(this).attr('username','0');
			}
		})
	})
</script>
		<!--分类-->
		<div class="cate">
			<div class="cateLeft">
				<ul>
					<li><a href="" class="bColor">全部商品分类</a></li>
					<li><a href=""><span></span>Lenovo笔记本</a></li>
					<li><a href=""><span></span>Lenovo笔记本</a></li>
					<li><a href=""><span></span>Lenovo笔记本</a></li>
					<li><a href=""><span></span>Lenovo笔记本</a></li>
					<li><a href=""><span></span>Lenovo笔记本</a></li>
					<li><a href=""><span></span>Lenovo笔记本</a></li>
					<li><a href=""><span></span>Lenovo笔记本</a></li>
					<li><a href=""><span></span>Lenovo笔记本</a></li>
					<li><a href=""><span></span>Lenovo笔记本</a></li>
				</ul>
			</div>
			<!--索引-->
			<div class="cateRight">
				<div class="rTop">
					<span>搜索内容：</span>
					<span class="floatRight">共<span class="sizeRed">97</span>款产品</span>
				</div>
				<div class="xilie">
					<span class="fontColor">系列：</span>
					<div>
						<span class="spBox">
							<ul>
								<li><a href="">YOGA系列</a></li>
								<li><a href="">YOGA系列</a></li>
								<li><a href="">YOGA系列</a></li>
								<li><a href="">YOGA系列</a></li>
								<li><a href="">YOGA系列</a></li>
								<li><a href="">YOGA系列</a></li>
								<li><a href="">YOGA系列</a></li>
								<li><a href="">YOGA系列</a></li>
								<li><a href="">YOGA系列</a></li>
								<li><a href="">YOGA系列</a></li>
								<li><a href="">YOGA系列</a></li>
								<li><a href="">YOGA系列</a></li>
								<li><a href="">YOGA系列</a></li>
								<li><a href="">YOGA系列</a></li>
								<li><a href="">YOGA系列</a></li>
							</ul>
						</span>
					</div>
					<span class="duoxuan"><a href="" class="daoshanjiao">多选</a></span>
				</div>
				<div class="jiage">
					<span class="fontColor">价格：</span>
					<span class="spBox">
						<ul>
							<li><a href="">1999元以下</a></li>
							<li><a href="">2000-2999元</a></li>
							<li><a href="">3000-3999元</a></li>
							<li><a href="">4000-4999元</a></li>
							<li><a href="">5000-6999元</a></li>
							<li><a href="">7000-9999元</a></li>
							<li><a href="">10000以上</a></li>
							<li class="input">
								<input type="text" name="" id="" />
								<span class="span">—</span>
								<input type="text" name="" id="" />
								<span class="button">确定</span>
							</li>
						</ul>
					</span>
				</div>
				<div class="CPU1">
					<span class="fontColor">CPU型号：</span>
					<span class="spBox">
						<ul>
							<li><a href="">intel i3</a></li>
							<li><a href="">intel i5</a></li>
							<li><a href="">intel i7</a></li>
							<li><a href="">intel 其它</a></li>
							<li><a href="">AMD</a></li>
						</ul>
					</span>
					<span class="duoxuan"><a href="" class="daoshanjiao">多选</a></span>
				</div>
				<div class="CPU">
					<span class="fontColor">内存容量：</span>
					<span class="spBox">
						<ul>
							<li><a href="">2G</a></li>
							<li><a href="">4G</a></li>
							<li><a href="">8G</a></li>
							<li><a href="">16G</a></li>
						</ul>
					</span>
					<span class="duoxuan"><a href="" class="daoshanjiao">多选</a></span>
				</div>
				<div class="CPU">
					<span class="fontColor">硬盘容量：</span>
					<span class="spBox">
						<ul>
							<li><a href="">500G</a></li>
							<li><a href="">1TB</a></li>
							<li><a href="">含128G SSD</a></li>
							<li><a href="">含256G SSD</a></li>
							<li><a href="">含512G SSD</a></li>
						</ul>
					</span>
					<span class="duoxuan"><a href="" class="daoshanjiao">多选</a></span>
				</div>
				<div class="CPU">
					<span class="fontColor">操作系统：</span>
					<span class="spBox">
						<ul>
							<li><a href="">Windows 10</a></li>
							<li><a href="">Windows 8</a></li>
							<li><a href="">Windows 7</a></li>
							<li><a href="">其它</a></li>
						</ul>
					</span>
					<span class="duoxuan"><a href="" class="daoshanjiao">多选</a></span>
				</div>
				<div class="CPU">
					<span class="fontColor">屏幕尺寸：</span>
					<span class="spBox">
						<ul>
							<li><a href="">11.6英寸</a></li>
							<li><a href="">12英寸</a></li>
							<li><a href="">13.3英寸</a></li>
							<li><a href="">14英寸</a></li>
							<li><a href="">15.6英寸</a></li>
						</ul>
					</span>
					<span class="duoxuan"><a href="" class="daoshanjiao">多选</a></span>
				</div>
				<div class="CPU">
					<span class="fontColor">物理分辨率：</span>
					<span class="spBox">
						<ul>
							<li><a href="">全高清屏（1920×1080）</a></li>
							<li><a href="">普通屏（1366×768）</a></li>
							<li><a href="">高分屏（1600×900）</a></li>
							<li><a href="">超高清屏（2K/3k/4k）</a></li>
						</ul>
					</span>
					<span class="duoxuan"><a href="" class="daoshanjiao">多选</a></span>
				</div>
				<div class="CPU">
					<span class="fontColor">适用场景：</span>
					<span class="spBox">
						<ul>
							<li><a href="">校园学生</a></li>
							<li><a href="">时尚女生</a></li>
							<li><a href="">家庭娱乐</a></li>
							<li><a href="">商务办公</a></li>
							<li><a href="">高清游戏</a></li>
							<li><a href="">轻薄便携</a></li>
						</ul>
					</span>
					<span class="duoxuan"><a href="" class="daoshanjiao">多选</a></span>
				</div>
				<div class="gengduo">
					<a href="javascript:;">更多选项<span class="daoneisj"></span></a>
				</div>
				<div class="shou">
					<a href="javascript:;">收起<span class="zhengneisj"></span></a>
				</div>
				<!--商品-->
				<div class="content-top">
					<ul>
						<li style="margin-top:5px ;"><a href="" style="color: #F01A1A;">销量</a></li>
						<li style="margin-top:5px ;"><a href="">时间</a></li>
						<li style="margin-top:5px ;"><a href="">按价格由高到低</a></li>
						<li style="margin-top:5px ;"><a href="" style="border-right: none;">按价格由低到高</a></li>
						<li style="margin-top:1px ;">
							<input type="checkbox" name="" id="checkbox" />
							<label for="checkbox">有库存</label>
						</li>
						<li style="margin-left: 150px;">
							<input type="text" name="" id="" class="input" placeholder="在结果中搜索" style="float: left;"/>
							<span><a href="" class="a"  style="margin-top:3px ;">确定</a></span>
						</li>
						<li class="li">
							<span>1/5</span>
							<span><a href="">首页</a></span>
							<span><a href="">上一页</a></span>
							<span><a href="">下一页</a></span>
							<span><a href="">尾页</a></span>
						</li>
					</ul>
				</div>
				<?php foreach ($goodsData as $k=>$v){?>
				<div class="content <?php if($k%4==0){?>
                boderLeft
               <?php }?>">
					<a href="<?php echo U('content/index',array('gid'=>$v['gid']))?>" class="img"><img src="<?php echo $v['listView']?>" alt="" width="160px" height="160px"/></a>
					<a href="<?php echo U('content/index',array('gid'=>$v['gid']))?>" class="a"><?php echo $v['gname']?></a>
					<span>第六代酷睿i7-6500U</span>
					<span class="sizeRed" style="font-size: 14px;font-weight: bold;">商城价:<?php echo $v['shopprice']?></span>
					<div>
						<a href="" class="gouwuche"><em></em>加入购物车</a>
						<a href="" class="shoucang"><p></p>收藏</a>
					</div>
				</div>
				<?php }?>
				<div class="content-bottom">
					<ul>
						<li class="li">
							<span>1/5</span>
							<span><a href="">首页</a></span>
							<span><a href="">上一页</a></span>
							<span><a href="">下一页</a></span>
							<span><a href="">尾页</a></span>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--尾部-->
<div class="wb">
	<div>
		<img src="./Public/Home/images/wb.jpg" alt="" />
	</div>
</div>
<!--尾部-->
<div class="weibu">
	<div>
		<ul>
			<li class="no-a">购物指南</li>
			<li><a href="">服务商信息</a></li>
			<li><a href="">购买流程</a></li>
			<li><a href="">注册登录</a></li>
		</ul>
		<ul class="p-left">
			<li class="no-a">购物指南</li>
			<li><a href="">服务商信息</a></li>
			<li><a href="">购买流程</a></li>
			<li><a href="">注册登录</a></li>
		</ul>
		<ul class="p-left">
			<li class="no-a">购物指南</li>
			<li><a href="">服务商信息</a></li>
			<li><a href="">购买流程</a></li>
			<li><a href="">注册登录</a></li>
		</ul>
		<ul class="p-left">
			<li class="no-a">购物指南</li>
			<li><a href="">服务商信息</a></li>
			<li><a href="">购买流程</a></li>
			<li><a href="">注册登录</a></li>
		</ul>
		<ul class="p-left">
			<li class="no-a">购物指南</li>
			<li><a href="">服务商信息</a></li>
			<li><a href="">购买流程</a></li>
			<li><a href="">注册登录</a></li>
		</ul>
		<ul class="p-left">
			<li class="no-a">购物指南</li>
			<li><a href="">服务商信息</a></li>
			<li><a href="">购买流程</a></li>
			<li><a href="">注册登录</a></li>
		</ul>
	</div>	
</div>
<div class="dibu">
	<div>
		<a href="">关于联想</a>
		<span> | </span>
		<a href="">联系我们</a>
		<span> | </span>
		<a href="">工作机会</a>
		<span> | </span>
		<a href="">新闻中心</a>
		<span> | </span>
		<a href="">聚享汇会员专享</a>
		<span> | </span>
		<a href="">ZUK官网</a>
		<span> | </span>
		<a href="">联想社区</a>
		<span> | </span>
		<a href="">NBD</a>
		<span> | </span>
		<a href="">懂的通信</a>
		<span> | </span>
		<a href="">联想超融合</a>
		<span> | </span>
		<a href="">销售网点</a>
		<span> | </span>
		<a href="">服务网点</a>
		<p></p>
		<a href="">版权所有：1998-2016 联想集团</a>
		<span> | </span>
		<a href="">法律公告</a>
		<span> | </span>
		<a href="">隐私保护</a>
		<span> | </span>
		<a href="">京ICP备11035381</a>
		<span> | </span>
		<a href="">京公网安备110108007970号</a>
		<span> | </span>
		<a href="">营业执照：110000410127232</a>
	</div>
</div>
	</body>
</html>











































































